<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>逗游吧后台框架</title>
    <% include ../include/docs-link %>
</head>
<body class="wrapper-body">
<% include ../include/docs-header %>
<div class="wrapper-container">
    <div class="container-fluid">
        <div class="row no-gutter">
            <div class="col-2">
                <% include ../include/docs-nav %>
            </div>
            <div class="col-10">
                <div class="wrapper-content">
                    <article class="wrapper-article">
                        <h1>Grid 栅格</h1>
                        <div class="anchor">
                            <h2 id="概述">概述</h2>
                            <a href="#概述">#</a>
                        </div>
                        <p>在Bootstrap的基础上扩展了删格功能</p>
                        <div class="anchor">
                            <h2 id="基础布局">基础布局</h2>
                            <a href="#基础布局">#</a>
                        </div>
                        <p>使用单一分栏创建基础的栅格布局。</p>
                        <div class="example">
                            <div class="example-case">
                                <div class="container-fluid">
                                    <div class="row">
                                        <div class="col-sm-12 demo-layout">col-sm-12</div>
                                    </div>
                                    <div class="row">
                                        <div class="col-sm-6 demo-layout-dark">col-sm-6</div>
                                        <div class="col-sm-6 demo-layout-light">col-sm-6</div>
                                    </div>
                                    <div class="row">
                                        <div class="col-sm-4 demo-layout-dark">col-sm-4</div>
                                        <div class="col-sm-4 demo-layout-light">col-sm-4</div>
                                        <div class="col-sm-4 demo-layout-dark">col-sm-4</div>
                                    </div>
                                    <div class="row">
                                        <div class="col-sm-3 demo-layout-dark">col-sm-3</div>
                                        <div class="col-sm-3 demo-layout-light">col-sm-3</div>
                                        <div class="col-sm-3 demo-layout-dark">col-sm-3</div>
                                        <div class="col-sm-3 demo-layout-light">col-sm-3</div>
                                    </div>
                                    <div class="row">
                                        <div class="col-sm-2 demo-layout-dark">col-sm-2</div>
                                        <div class="col-sm-2 demo-layout-light">col-sm-2</div>
                                        <div class="col-sm-2 demo-layout-dark">col-sm-2</div>
                                        <div class="col-sm-2 demo-layout-light">col-sm-2</div>
                                        <div class="col-sm-2 demo-layout-dark">col-sm-2</div>
                                        <div class="col-sm-2 demo-layout-light">col-sm-2</div>
                                    </div>
                                </div>
                            </div>
                            <div class="example-code">
    <pre><code class="html">
    &lt;div class="container-fluid"&gt;
        &lt;div class="row"&gt;
            &lt;div class="col-sm-12 demo-layout"&gt;col-sm-12&lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="row"&gt;
            &lt;div class="col-sm-6 demo-layout-dark"&gt;col-sm-6&lt;/div&gt;
            &lt;div class="col-sm-6 demo-layout-light"&gt;col-sm-6&lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="row"&gt;
            &lt;div class="col-sm-4 demo-layout-dark"&gt;col-sm-4&lt;/div&gt;
            &lt;div class="col-sm-4 demo-layout-light"&gt;col-sm-4&lt;/div&gt;
            &lt;div class="col-sm-4 demo-layout-dark"&gt;col-sm-4&lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="row"&gt;
            &lt;div class="col-sm-3 demo-layout-dark"&gt;col-sm-3&lt;/div&gt;
            &lt;div class="col-sm-3 demo-layout-light"&gt;col-sm-3&lt;/div&gt;
            &lt;div class="col-sm-3 demo-layout-dark"&gt;col-sm-3&lt;/div&gt;
            &lt;div class="col-sm-3 demo-layout-light"&gt;col-sm-3&lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="row"&gt;
            &lt;div class="col-sm-2 demo-layout-dark"&gt;col-sm-2&lt;/div&gt;
            &lt;div class="col-sm-2 demo-layout-light"&gt;col-sm-2&lt;/div&gt;
            &lt;div class="col-sm-2 demo-layout-dark"&gt;col-sm-2&lt;/div&gt;
            &lt;div class="col-sm-2 demo-layout-light"&gt;col-sm-2&lt;/div&gt;
            &lt;div class="col-sm-2 demo-layout-dark"&gt;col-sm-2&lt;/div&gt;
            &lt;div class="col-sm-2 demo-layout-light"&gt;col-sm-2&lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    </code></pre>
                            </div>
                            <div class="example-desc">具体使用请参考Bootstrap3.3.7版本</div>
                            <div class="example-code-more">
                                <i class="glyphicon glyphicon-triangle-bottom"></i>
                                <span>Show Code</span>
                            </div>
                        </div>
                        <div class="anchor">
                            <h2 id="消除排水沟/Collapse gutter">消除排水沟/Collapse gutter</h2>
                            <a href="#消除排水沟/Collapse gutter">#</a>
                        </div>
                        <p>完全地去掉间隔，只需要添加 .no-gutter 类。</p>
                        <div class="example">
                            <div class="example-case">
                                <div class="container-fluid">
                                    <div class="row no-gutter">
                                        <div class="col-sm-6 demo-layout-dark">col-sm-6</div>
                                        <div class="col-sm-6 demo-layout-light">col-sm-6</div>
                                    </div>
                                </div>
                            </div>
                            <div class="example-desc">在Bootstrap的基础上扩展了取消排水槽</div>
                            <div class="example-code">
<pre><code class="html">
    &lt;div class="container-fluid"&gt;
        &lt;div class="row no-gutter"&gt;
            &lt;div class="col-sm-6 demo-layout-dark"&gt;col-sm-6&lt;/div&gt;
            &lt;div class="col-sm-6 demo-layout-light"&gt;col-sm-6&lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;

</code></pre>
                            </div>
                            <div class="example-code-more">
                                <i class="glyphicon glyphicon-triangle-bottom"></i>
                                <span>Show Code</span>
                            </div>
                        </div>
                        <div class="anchor">
                            <h2 id="响应式宽度布局">响应式宽度布局</h2>
                            <a href="#响应式宽度布局">#</a>
                        </div>
                        <p>此类提供了一些非常有用的响应式宽度的类。基本上它们的使用方法就像通常和Bootstrap的类一样，但是Bootstrap带有屏幕分辨率类前缀，这样它们只在特定的断点来产生效果。此方法忽略屏幕分辨率前缀，在任何分辨率下都能正常展示</p>
                        <div class="example">
                            <div class="example-case">
                                <div class="container-fluid">
                                    <div class="row">
                                        <div class="col-12 demo-layout">col-12</div>
                                    </div>
                                    <div class="row">
                                        <div class="col-6 demo-layout-dark">col-6</div>
                                        <div class="col-6 demo-layout-light">col-6</div>
                                    </div>
                                    <div class="row">
                                        <div class="col-4 demo-layout-dark">col-4</div>
                                        <div class="col-4 demo-layout-light">col-4</div>
                                        <div class="col-4 demo-layout-dark">col-4</div>
                                    </div>
                                    <div class="row">
                                        <div class="col-3 demo-layout-dark">col-3</div>
                                        <div class="col-3 demo-layout-light">col-3</div>
                                        <div class="col-3 demo-layout-dark">col-3</div>
                                        <div class="col-3 demo-layout-light">col-3</div>
                                    </div>
                                    <div class="row">
                                        <div class="col-2 demo-layout-dark">col-2</div>
                                        <div class="col-2 demo-layout-light">col-2</div>
                                        <div class="col-2 demo-layout-dark">col-2</div>
                                        <div class="col-2 demo-layout-light">col-2</div>
                                        <div class="col-2 demo-layout-dark">col-2</div>
                                        <div class="col-2 demo-layout-light">col-2</div>
                                    </div>
                                </div>
                            </div>
                            <div class="example-desc">在Bootstrap的基础上扩展了网格功能</div>
                            <div class="example-code">
<pre><code class="html">
    &lt;div class="container-fluid"&gt;
        &lt;div class="row"&gt;
            &lt;div class="col-12 demo-layout"&gt;col-12&lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="row"&gt;
            &lt;div class="col-6 demo-layout-dark"&gt;col-6&lt;/div&gt;
            &lt;div class="col-6 demo-layout-light"&gt;col-6&lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="row"&gt;
            &lt;div class="col-4 demo-layout-dark"&gt;col-4&lt;/div&gt;
            &lt;div class="col-4 demo-layout-light"&gt;col-4&lt;/div&gt;
            &lt;div class="col-4 demo-layout-dark"&gt;col-4&lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="row"&gt;
            &lt;div class="col-3 demo-layout-dark"&gt;col-3&lt;/div&gt;
            &lt;div class="col-3 demo-layout-light"&gt;col-3&lt;/div&gt;
            &lt;div class="col-3 demo-layout-dark"&gt;col-3&lt;/div&gt;
            &lt;div class="col-3 demo-layout-light"&gt;col-3&lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="row"&gt;
            &lt;div class="col-2 demo-layout-dark"&gt;col-2&lt;/div&gt;
            &lt;div class="col-2 demo-layout-light"&gt;col-2&lt;/div&gt;
            &lt;div class="col-2 demo-layout-dark"&gt;col-2&lt;/div&gt;
            &lt;div class="col-2 demo-layout-light"&gt;col-2&lt;/div&gt;
            &lt;div class="col-2 demo-layout-dark"&gt;col-2&lt;/div&gt;
            &lt;div class="col-2 demo-layout-light"&gt;col-2&lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;

</code></pre>
                            </div>
                            <div class="example-code-more">
                                <i class="glyphicon glyphicon-triangle-bottom"></i>
                                <span>Show Code</span>
                            </div>
                        </div>
                    </article>
                </div>
            </div>
        </div>
    </div>
</div>
<% include ../include/docs-footer %>
</body>
</html>